<template>
    <div class="material clearfix">
        <img class="fl col-2 avatar" :src="userBasicInfo.avatar" alt="" />
        <div class="fr col-10">
            <div class="name">{{userBasicInfo.nickname}}</div>
            <div class="event" v-html="card.content"></div>
            <!-- <div class="image-wrap" :style="{zoom: scale}">
                <canvas v-if="canvasVisible" class="image" :style="{width: card.size.width + 'px', height: card.size.height + 'px'}" :canvas-id="canvasId"></canvas>
                <img class="image-content" :class="{absolute: canvasVisible}" :src="src" :style="{width: card.size.width + 'px', height: card.size.height + 'px'}" @click="onClickDownload" />
            </div> -->

            <div class="image-wrap">
                <div v-for="(image, index) in card.images"
                    :key="index"
                    class="image"
                    :class="['image-' + card.images.length]"
                    :style="{'background-image': 'url(' + image + ')'}"
                    @click="onClickImage(image, card.images)" >
                </div>
            </div>

            <div class="share clearfix">
                <div name="primary" class="btn btn-mobile btn-primary btn-normal btn-round copy fr" @click="onClickCopy(card)">复制发圈</div>
                <div class="people fr">{{card.page_view}}人已发&nbsp;&nbsp;</div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    mapState,
} from 'vuex';
import {
    api,
} from '@/lib/api';
import store from '@/store';

export default {
    name: 'JoinCard',
    props: {
        /**
         * 卡数据
         *  - path
         *  - size.width
         *  - size.height
         *  - qr_code_position[0]
         *  - qr_code_position[1]
         */
        card: {
            type: Object,
        },
        /** canvasId */
        canvasId: {
            required: true,
            type: String,
        },
    },
    data() {
        return {
            /** 链接 */
            src: null,
            /** canvas是否可见 */
            canvasVisible: true,
        };
    },
    computed: {
        ...mapState({
            // 用户基础信息
            userBasicInfo: state => state.user.basicInfo,
        }),
        /** canvas的高度 */
        // scale() {
        //     return 237 / this.card.size.width;
        // },
    },
    methods: {
        /** 点击复制发圈 */
        async onClickCopy(card) {
            // 保存文本
            await api.setClipboardData({
                data: card.content,
            });
            store.commit('utils/startRequest');
            await store.dispatch('browseShareMaterial', card.id);
            // 保存图片

            for (let i = 0; i < card.images.length; i++) {
                const downloadRes = await api.downloadFile({
                    url: card.images[i],
                }).catch(err => err);
                await api.saveImageToPhotosAlbum({
                    filePath: downloadRes.tempFilePath,
                }).catch(err => err);
            }
            const a = 1;
            if (a >= 0) {
                wx.showToast({
                    title: '文案已复制，图片已保存相册',
                    icon: 'none',
                    duration: 2000,
                });
            } else {
                store.commit('utils/endRequest');
            }
        },
        /**
         * 点击图片
         */
        onClickImage(image, images) {
            wx.previewImage({
                current: image,
                urls: images,
            });
        },
    },
    async mounted() {
        // const ctx = wx.createCanvasContext(this.canvasId);
        // const card = this.card;
        // const downloadRes = await Promise.all([
        //     api.downloadFile({
        //         url: card.path,
        //     }),
        //     api.downloadFile({
        //         url: this.userBasicInfo.mini_program_code,
        //     }),
        // ]);
        // // 237是在屏幕上的宽度
        // ctx.drawImage(downloadRes[0].tempFilePath, 0, 0, card.size.width, card.size.height, 0, 0, card.size.width, card.size.height);
        // ctx.drawImage(downloadRes[1].tempFilePath, 0, 0, card.qr_code_size.width, card.qr_code_size.height, card.qr_code_position[0], card.qr_code_position[1], Number(card.qr_code_size.width), Number(card.qr_code_size.height));
        // ctx.draw();
        // const res = await api.canvasToTempFilePath({
        //     x: 0,
        //     y: 0,
        //     width: this.card.size.width,
        //     height: this.card.size.height,
        //     canvasId: this.canvasId,
        // });
        // this.src = res.tempFilePath;
        // this.canvasVisible = false;
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.material {
    .avatar {
        width: 47px;
        height: 47px;
        background-color: @image-bg;
    }
    .name,
    .event {
        font-size: 28rpx;
        line-height: 40rpx;
        padding-bottom: 10px;
        white-space: pre-line;
    }

    // canvas图片显示
    // .image-wrap {
    //     position: relative;
    //     .image {
    //         background-color: @image-bg;
    //         opacity: 0;
    //         transform-origin: 0 0;
    //     }
    //     .image-content {
    //         top: 0;
    //         left: 0;
    //         transform-origin: 0 0;
    //         .absolute {
    //             position: absolute;
    //         }
    //     }
    // }

    // 普通形式图片
    .image-wrap {
        .image {
            display: inline-block;
            // 为什么要限定高度宽度
            margin-top: 5px;
            margin-left: 5px;
            vertical-align: middle;
            background: center no-repeat;
            background-size: cover;
            &.image-1 {
                width: 200px;
                height: 200px;
            }
            &.image-2,
            &.image-4 {
                width: 120px;
                height: 120px;
            }
            &.image-3,
            &.image-5,
            &.image-6,
            &.image-7,
            &.image-8,
            &.image-9 {
                width: 90px;
                height: 90px;
            }
        }
    }

    .share {
        padding-top: 10px;
        .people {
            padding-top: 16rpx;
            line-height: 36rpx;
        }
    }
}
</style>
